
<!DOCTYPE html>
<html>
<head>
[#include "../manage/common/head.html" /]
</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>宝贝分类</h5>
						<div class="ibox-tools">
                       		<button id="add" type="button" class="btn-xs btn-primary" data-toggle="modal" data-title="新建" data-target="#windowModal" onclick="add()">添加</button>
                       		<button id="add" type="button" class="btn-xs btn-warning" onclick="edit()">修改</button>
                       		<button id="add" type="button" class="btn-xs btn-danger" onclick="del()">删除</button>
                    	</div>
					</div>
					<div class="ibox-content">
						<div id="treeview1" class="test" style="height: 100%;"></div>
						<div id="selectedId1" class="hidden"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="windowModal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">新建</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="myForm">
						<div class="form-group">
							<label class="col-sm-2 control-label">商品分类图</label>
							<div class="col-sm-10" id="videoUpload1">
								<div id="image1"></div>
								<input id="deleteId1" type="hidden"></input>
								<div id="progress1"></div>
								<div class="col-sm-12">
									<button id="filePicker1" class="btn btn-primary" style="margin-top: 10px;">选择图片</button>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">类别名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="categoryName">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">上级类别</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="topName" onclick="treeViewShowHide()">
							</div>
							<div class="col-sm-2"></div>
							<div class="col-sm-10">
								<div id="treeview2" class="test" style="display: none;height: 100%;"></div>
								<div id="topId" class="hidden"></div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer clearfix">
					<div class="form-group col-md-8 col-sm-offset-2 text-center">
						<button type="button" class="btn btn-primary" id="save">保存</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	[#include "../manage/common/js.html" /]
	<script>
		function restForm() {
			$("#topId").val("");
			$("#topName").val("");
			$("#categoryName").val("");
			$("#treeview2").hide();
			$("#image1").empty();
			$("#deleteId1").val("");
			delWaitId1 = 0;
			imgId1 = 0;
		}
		var oid = 0;
		var imgId1 = 0;
		var delWaitId1 = 0;
		$("#windowModal").on("hidden.bs.modal", function() {
			restForm();
		});
		
		var su1 = new ss.SimpleUpload({
			
			button : 'filePicker1',
			url : '${base}/manage/upload',
			name : 'file',
			autoSubmit : true,
			responseType : 'json',
			multiple : true,
			allowedExtensions : [ 'jpg', 'jpeg', 'png', 'gif' ],
			data : {
				imgType : 5
			},
			onSubmit : function(filename, ext) {
				var prog = document.createElement('div'), 
				outer = document.createElement('div'), 
				bar = document.createElement('div'), 
				size = document.createElement('div'), 
				self = this;
				
				outer.className = 'progress progress-striped';
				bar.className = 'progress-bar progress-bar-success';

				outer.appendChild(bar);
				prog.appendChild(size);
				prog.appendChild(outer);
				$("#progress1").append(prog);

				self.setProgressBar(bar);
				self.setProgressContainer(prog);
				self.setFileSizeBox(size);
			},
			onComplete : function(filename, response) {
				if($("#deleteId1").val() != "" && $("#deleteId1").val() != delWaitId1){
					deleteImg($("#deleteId1").val());
				}
				imgId1 = response.file.id;
				$("#deleteId1").val(imgId1);
				var html = '<div class="img1"><img src="${base}/'+response.file.imgUrl+'" height="150" width="100" alt="..."/></div>'+
							'<div class="divX" onclick="delImg(1,'+imgId1+')" style="position: absolute; left: 105px; top: -5px; display: block;background:#fff;">'+
		            		'<button type="button" class="close" style="color: red">&times;</button>'+
		            		'</div>';
				$("#image1").html(html);
			},
			onExtError : function() {
				swal("警告", "只允许上传'jpg', 'jpeg', 'png', 'gif'格式的图片！","warning");
			},
			onErroe : function() {
				swal("错误", "文件上传失败！", "error");
			}
		});

		function initialize(){
			$("#treeview1").empty();
			$.post("${base}/manage/goods/selectCategoryList",function(r){
				$("#treeview1").treeview({
			    	levels: 99,
			        data: r,
			        onNodeSelected: function(e, o) {
			        	$("#selectedId1").val("");
			            $("#selectedId1").val(o.id);
			        },
			        onNodeUnselected: function(e, o) {
			        	$("#selectedId1").val("");
			        }
			    })
			},'json')
		}
		
		$(function() {
			initialize();
		})

		$("#save").click(function() {
			var categoryName = $("#categoryName").val();
			var topId = $("#topId").val();
			var topName = $("#topName").val();
			if(topName == ""){
				topId = 0;
			}
        	if(categoryName == ""){
        		swal("警告","分类名称不能为空！","warning");
        		return;
        	}
			$.post("${base}/manage/goods/saveCategory", {
				id : oid,
				categoryName : categoryName,
				topId : topId,
				imgId : imgId1
			}, function(r) {
				if (r.code == 0) {
					swal("成功", "保存完成！", "success");
					$('#windowModal').modal('hide');
					oid = 0;
					initialize();
				} else {
					swal("错误", r.msg, "error");
				}
			}, 'json')
		})

		function edit() {
			var id = $("#selectedId1").val();
			if(id == ""){
				swal("警告","请选择一个分类编辑！","warning");
        		return;
			}
			$('#windowModal').modal('show');
			$('#windowModal').find('.modal-title').text("编辑");
			$.post("${base}/manage/goods/getCategory/" + id, function(r) {
				$("#categoryName").val(r.categoryDate.categoryName);
				$("#topName").val(r.categoryDate.topName);
				$("#topId").val(r.categoryDate.topId);
				imgId1 = r.categoryDate.imgId;
				if(imgId1 != 0){
					delWaitId1 = imgId1;
					var html = '<div class="img1"><img src="${base}/'+r.categoryDate.imgUrl+'" height="150" width="100" alt="..."/></div>'+
								'<div class="divX" onclick="delImg(1,'+r.categoryDate.imgId+')" style="position: absolute; left: 105px; top: -5px; display: block;background:#fff;">'+
			            		'<button type="button" class="close" style="color: red">&times;</button>'+
			            		'</div>';
					$("#image1").html(html);
					$(".img1").addClass("img-show");
					$("#deleteId1").val(imgId1);
				}
				oid = id;
			}, 'json')

		}
		
		function add() {
			$('#windowModal').find('.modal-title').text("新建");
		}

		function del() {
			var id = $("#selectedId1").val();
			if(id == ""){
				swal("警告","请选择一个分类删除！","warning");
        		return;
			}
			swal({
				title : '确定要删除吗?',
				type : 'warning',
				showCancelButton : true,
				cancelButtonColor : '#3085d6',
				confirmButtonColor : '#d33',
				confirmButtonText : '是的,确定!',
				cancelButtonText : '取消'
			}).then(function() {
				$.post("${base}/manage/goods/delCategory/" + id, function(r) {
					if (r.code == 0) {
						swal("成功", "已经删除！", "success");
					}else if(r.code == 2){
						swal("警告", r.msg, "warning");
					}else{
						swal("错误", r.msg, "error");
					}
					initialize();
				}, 'json')
			})
		}
		function treeViewShowHide(){
			$.post("${base}/manage/goods/selectCategoryList",function(r){
				$("#treeview2").treeview({
			    	levels: 1,
			        data: r,
			        onNodeSelected: function(e, o) {
			        	$("#topId").val("");
			        	$("#topName").val("");
			            $("#topId").val(o.id);
			            $("#topName").val(o.text);
			            $("#treeview2").hide();
			        },
			        backColor: "#DDDDDD"
			    })
				$("#treeview2").show();
			},'json')
		}
		function deleteImg(id){
			$.post("${base}/manage/goods/delImg/" + id, function(r) {
				if (r.code != 0) {
					swal("错误", r.msg, "error");
				}
			}, 'json')
		}
		function delImg(flag,id) {
			swal({
				title : '确定要删除吗?',
				type : 'warning',
				showCancelButton : true,
				cancelButtonColor : '#3085d6',
				confirmButtonColor : '#d33',
				confirmButtonText : '是的,确定!',
				cancelButtonText : '取消'
			}).then(function() {
				$.post("${base}/manage/goods/delImg/" + id, function(r) {
					if (r.code == 0) {
						if(flag == 1){
							$("#image1").empty();
							$("#deleteId1").val("");
							delWaitId1 = 0;
							imgId1 = 0;
						}else if(flag == 2){
							$("#image2").empty();
							$("#deleteId2").val("");
							delWaitId2 = 0;
							imgId2 = 0;
						}else if(flag == 3){
							$("#img3_"+id).parent().remove();
						}
						swal("成功", "已经删除！", "success");
					}
				}, 'json')
			})
		}
	</script>
</body>
</html>
